<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>Supermercado COTO</title>
		<link rel="stylesheet" href="estilos/estilo.css" />
		 <script language="javascript">
		cantidadProductos = 8;
		function anular(){
			i=0;
            for(i=0; i<cantidadProductos; i++){
				document.formulario.elements[i].checked=0;
			}
			resumen();
			return true;
		}
		
		function validar(){
			i=0;
            for(i=0; i<cantidadProductos; i++){
				if(document.formulario.elements[i].checked){
				 return true;
				}
			}
				
			alert("No ha seleccionado ningun producto");
			document.getElementById("producto01").focus();
			return false;
		};
		
		function resumen(){
                suma=0;
                i=0;
                for(i=0; i<cantidadProductos; i++){
					if(document.formulario.elements[i].checked){
						suma = parseInt(suma) + parseInt(document.formulario.elements[i].value);
					};
				};
                document.getElementById("suma").innerHTML = suma;
                return true;
            };
	     </script>    
	</head>
	<body> 
		<!-- Contenido -->
		<div id="contenido">
			<div id="columnaIzquierda">
				<img src="imagenes/fotos/carrito.jpg" alt="Carrito" style="width: 169px" />
				
			</div>
			<div id="textoCentral">
				<h1>Carrito De Compras</h1>				
				<form  onsubmit="return validar()" onreset="anular()" action="procesaPedido.html" name="formulario" >
				<p><input id="producto01" type="checkbox" onchange="resumen()" value=10 />Tomate Perita ALCO 500 grs</p>
				<p><input id="producto02" type="checkbox" onchange="resumen()" value=11 />Arvejas ALCO 300 grs</p>
				<p><input id="producto03" type="checkbox" onchange="resumen()" value=8 />Coca Cola 2 lts</p>
				<p><input id="producto04" type="checkbox" onchange="resumen()" value=9 />Cerveza Quilmes 900cc</p>
				<p><input id="producto05" type="checkbox" onchange="resumen()" value=15 />Papitas Pringles 200 grs</p>
				<p><input id="producto06" type="checkbox" onchange="resumen()" value=8 />Doritos 200 grs</p>
				<p><input id="producto07" type="checkbox" onchange="resumen()" value=8 />Papitas Lays 130 grs</p>
				<p><input id="producto08" type="checkbox" onchange="resumen()" value=6 />Papel Higienico 100 mts</p>
				TOTAL: $<span id="suma">0</span>
				<p><input id="realizarPedido" type="submit" value="Confirmar Pedido" /></p>
				<p><input id="anularPedido" type="reset" value="Anular" /></p>
				
			</div>
			<div id="columnaDerecha">
				<img src="imagenes/fotos/frente.jpeg" alt="COTO" style="width: 250px" />
			</div>
		</div>
	</body>
</html>
